const fill = document.querySelector('.fill')
const empties = document.querySelectorAll('.empty')

fill.addEventListener('dragstart',dragstart)
fill.addEventListener('dragend',dragend)

for(const empty of empties){
    empty.addEventListener('dragover',dragover)
    empty.addEventListener('dragenter', dragenter)
    empty.addEventListener('dragleave', dragleave)
    empty.addEventListener('drop', dragDrop)
}


function dragstart(){
    this.className += ' hold'
}

function dragover(e){
    e.preventDefault();
}

function dragenter(){
    e.preventDefault();
    this.className += ' hovered'
}

function dragleave(){
    this.className += ' empty'
}

function dragDrop(){
    this.className += ' empty'
    this.append(fill)
}

function dragend(){
    this.className += ' fill'
}